<template>
    <div>
        <a-modal v-model:open="open" title="设置" width="900px" :footer="null">
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <!-- 部门 -->
                <a-form-item label="部门：" v-bind="validateInfos.departmentId">
                    <a-select v-model:value="modelRef.departmentId" @change="handleDepartmentChange"
                        placeholder="请选择部门">
                        <a-select-option v-for="item in props.LeaderDate" :key="item.id" :value="item.id">{{ item.name
                        }}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
            <a-tabs>
                <a-tab-pane key="1" tab="出勤设置">
                    <backgAttendance :closeModel="handleOk" :departmentId="modelRef.departmentId" />
                </a-tab-pane>
                <a-tab-pane key="2" tab="请假设置" force-render>
                    <backgTakeLeave :closeModel="handleOk" :departmentId="modelRef.departmentId" />
                </a-tab-pane>
                <a-tab-pane key="3" tab="扣款设置">
                    <backgDeduction :closeModel="handleOk" :departmentId="modelRef.departmentId" />
                </a-tab-pane>
                <a-tab-pane key="4" tab="加班设置">
                    <backgOvertimeWork :closeModel="handleOk" :departmentId="modelRef.departmentId" />
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { Form } from 'ant-design-vue';
import backgAttendance from './backg-setting-package/backg-attendance.vue';
import backgTakeLeave from './backg-setting-package/backg-take-leave.vue';
import backgOvertimeWork from './backg-setting-package/backg-overtime-work.vue';
import backgDeduction from './backg-setting-package/backg-deduction.vue';


const useForm = Form.useForm;

const props = defineProps({
    LeaderDate: {
        type: Function,
        request: true
    }
})

const open = ref<boolean>(false);
const labelCol = { span: 4 };
const wrapperCol = { span: 14 };

const modelRef = reactive({
    departmentId: 1,  // 部门
});

console.log(modelRef.departmentId, 'modelRef')

const rulesRef = reactive({
    departmentId: [
        {
            required: true,
            message: '请选择部门',
        },
    ],
});

const { validateInfos } = useForm(modelRef, rulesRef);

// 处理部门选择变化
const handleDepartmentChange = (value: number) => {
    modelRef.departmentId = value
}



const showModal = () => {
    open.value = true;
};

const handleOk = () => {
    open.value = false;
};

defineExpose({
    showModal
})
</script>